<template>
    <div style="height:100%;width:100%;">
        <bar class="bar" @on-back="$router.back()" title="修改支付密码"></bar>
        <div class="youba-primary-grey" style="height: 60px; text-align: center; line-height: 60px">请输入新的支付密码</div>
        <div class="modify-pwd">
            <div class="modify-pwd-input">{{passwordArr[0]}}</div>
            <div class="modify-pwd-input">{{passwordArr[1]}}</div>
            <div class="modify-pwd-input">{{passwordArr[2]}}</div>
            <div class="modify-pwd-input">{{passwordArr[3]}}</div>
            <div class="modify-pwd-input">{{passwordArr[4]}}</div>
            <div style="border-right: 1px solid #b9b9b9;"
                 class="modify-pwd-input">{{passwordArr[5]}}
            </div>
        </div>

        <div class="mu-input-control">

            <div class="pwd-keyboard">
                <div class="pwd-keyboard-button" v-for="item in 9" :key="item" @click="handle(item)">{{item}}
                </div>
                <div class="pwd-keyboard-button gray"></div>
                <div class="pwd-keyboard-button" @click="handle('0')">0</div>
                <div class="pwd-keyboard-button gray mu-e-black-color" @click="remove"><i
                    class="ion ion-backspace-outline"></i></div>
            </div>
        </div>

        <input-control title="修改支付密码" @pwdDone="pwdDone" :isShow.sync="isShow"></input-control>

    </div>
</template>

<script>
    import {
        Bar,
        MInput,
        InputControl
    } from 'muka-ui'
    import {
        Group,
        XButton
    } from 'vux'
    import md5 from 'js-md5'

    export default {
        name: 'editName',
        components: {
            Bar,
            'mu-input': MInput,
            Group,
            XButton,
            InputControl
        },
        data: function () {
            return {
                isShow: false,
                passwordArr: [],
                password: ''
            }
        },
        created: function () {
            this.password = ''
        },
        methods: {
            handle: function (value) {
                if (this.passwordArr.length < 6) {
                    this.passwordArr.push(value)
                }
                if (this.passwordArr.length >= 6) {
                    this.isShow = true
                }
            },
            remove: function () {
                this.passwordArr.pop()
            },
            pwdDone: async function (pwd) {
                if (!pwd) {
                    this.$vux.toast.show({
                        text: '请输入新密码',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                this.$ajax(
                    'safe/changePayPassword',
                    {
                        oldPassword: md5(pwd),
                        newPassword: md5(this.passwordArr.join(''))
                    },
                    (content) => {
                        this.$router.back()
                    }, true, true)
            }
        }
    }

</script>
<style lang="less">
    .myInfo-confirm {
        .weui-dialog__btn_default {
            display: none;
        }
    }

    .modify-pwd {
        display: flex;
        justify-content: center;
    }

    .modify-pwd-input {
        height: 40px;
        top: 1px;
        border: 1px solid #b9b9b9;
        border-right: 0;
        width: 40px;
        font-size: 25px;
        text-align: center;
        line-height: 40px;
    }

</style>
